{% extends "base.html" %}
{% block h1 %}{{ nome|capfirst }}	{% endblock %}

{% block arqStaticos %}
	<script  src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script  src="http://livrojqueryui.com.br/exemplos/c3/js/jquery-ui-1.8.17.custom.min.js"></script>

	<style>
			.header, .chest, .hand_l, .hand_r, .feet, .hand{
				margin: 5px;
				cursor: move;
			}
			#all ul{
				margin: 5px 0;
				padding:0;
				list-style: none;
			}
			#all ul li{
				display: inline
			}
			#all{
				margin: 10px 0;
				border: 1px dotted #999;
				padding: 10px;
				width: 554px;
			}
			#header, #chest, #hand_l, #hand_r, #feet{
				width: 105px;
				height: 103px;
				position: relative;
			}
			#header{
				top: 20px;
				left: 85px;
			}
			#chest{
				top: -50px;
				left: 390px;
			}
			#hand_l{
				top: 12px;
				left: 22px;
			}
			#hand_r{
				top: -95px;
				left: 425px;
			}
			#feet{
				top: 50px;
				left: 30px;
			}
			.destacar{background: #FFFF00;opacity: 0.1;}
	</style>

{% endblock %}

{% block script %}
<script>
$(function(){
	$('.mp-info').css('width', mp+'%');
	$('.hp-info').css('width', hp+'%');
	$('#infoCharacter table tr:even').addClass('line');
	
	$('.header, .chest, .hand_l, .hand_r, .feet, .hand').draggable({revert: 'invalid', containment: '#model-equipment', addClasses: false, snapTolerance: 100});
	
	$('.hand_r').draggable({
		start: function(event, ui){
			if($('#hr').val() == '0' && $('#hd').val() == '0'){
				$('#hand_r').droppable('enable');
			}
		}
	});
	
	$('.hand_l').draggable({
		start: function(event, ui){
			if($('#hl').val() == '0' && $('#hd').val() == '0'){
				$('#hand_l').droppable('enable');
			}
		}
	});
	
	$('.hand').draggable({
		start: function(event, ui){
			if($('#hr').val() == '1' || $('#hl').val() == '1'){
				$('#hand_r').droppable('disable');
				$('#hand_l').droppable('disable');
			}
		}
	});
	
	$('#header').droppable({activeClass: 'destacar', accept: '.header',
		drop: function(event, ui){
			$(this).droppable('disable');
		}
	});
	$('#chest').droppable({activeClass: 'destacar', accept: '.chest',
		drop: function(event, ui){
			$(this).droppable('disable');
		}
	});
	$('#hand_l').droppable({activeClass: 'destacar', accept: '.hand_l, .hand',
		drop: function(event, ui){
			$(this).droppable('disable');
			var classe = ui.draggable[0].className.replace('ui-draggable-dragging','');
			if(classe.trim() == 'hand'){
				$('#hand_r').droppable('disable');
				$('#hd').val('1');
			}else{
				$('#validar').val('1');
				$('#hl').val('1');
			}
		},
		over: function(event, ui){
			$('#hand_r').removeClass('destacar');
			var classe = ui.draggable[0].className.replace('ui-draggable-dragging','');
			if(classe.trim() == 'hand' && $('#hr').val() == '1'){
				$(this).droppable('disable');
				$(this).removeClass('destacar');
			}
		},
		out: function(event, ui){
			var classe = ui.draggable[0].className.replace('ui-draggable-dragging','');
			if($('#hr').val() == '0' && classe.trim() == 'hand'){
				$('#hand_r').addClass('destacar');
			}
		}
	});
	$('#hand_r').droppable({activeClass: 'destacar', accept: '.hand_r, .hand',
		drop: function(event, ui){
			$(this).droppable('disable');
			var classe = ui.draggable[0].className.replace('ui-draggable-dragging','');
			if(classe.trim() == 'hand'){
				$('#hand_l').droppable('disable');
				$('#hd').val('1');
			}else{
				$('#validar').val('1');
				$('#hr').val('1');
			}
		},
		over: function(event, ui){
			$('#hand_l').removeClass('destacar');
			var classe = ui.draggable[0].className.replace('ui-draggable-dragging','');
			if(classe.trim() == 'hand' && $('#hl').val() == '1'){
				$(this).droppable('disable');
				$(this).removeClass('destacar');
			}
		},
		out: function(event, ui){
			var classe = ui.draggable[0].className.replace('ui-draggable-dragging','');
			if($('#hl').val() == '0' && classe.trim() == 'hand'){
				$('#hand_l').addClass('destacar');
			}
		}
	});
	$('#feet').droppable({activeClass: 'destacar', accept: '.feet',
		drop: function(event, ui){
			$(this).droppable('disable');
		}
	});
	$('#all').droppable({activeClass: 'destacar-back',
		drop: function(event, ui){
			var classe = ui.draggable[0].className.replace('ui-draggable-dragging','');
			if(classe.trim() == 'hand' && $('#validar').val() == '0'){
				$('#hand_l').droppable('enable');
				$('#hand_r').droppable('enable');
				$('#hd').val('0');
			}else if(classe.trim() == 'hand_r' || classe.trim() == 'hand_l'){
				if($('#hd').val() == '0'){
					$('#'+classe.trim()).droppable('enable');
				}
			}else{
				$('#'+classe.trim()).droppable('enable');
			}
			if(classe.trim() == 'hand_r'){
				$('#hr').val('0');
			}else if(classe.trim() == 'hand_l'){
				$('#hl').val('0');
			}
		}
	});
});
</script>
{% endblock %}
{% block content %}
<fieldset>
	<div id="imgCharacter">
		<img src="{{ img_personagem }}" />
	</div>
	<div id="infoCharacter">
		<table width="100%">
			<tr class="title">
				<td colspan="2">Informações do Personagem</td>
			</tr>
			<tr>
				<td width="35%">HP:</td>
				<td class="hp" value="{{ hp_atual }}" rel="{{ hp }}">
					<div style="background: url('{{ MEDIA_URL }}img/progress-bar/progress.gif') no-repeat; height: 13px; width: 1px; display: block; float: left"></div>
					<div style="background: url('{{ MEDIA_URL }}img/progress-bar/bg.gif'); height: 13px; width: 99.5%; display: block; float: left">
					<span class="hp-info" style="background: url('{{ MEDIA_URL }}img/progress-bar/on_green.gif'); display: block; float: left; height: 11px; margin: 1px 0; font-size: 8px; font-family: Tahoma; line-height: 11px; font-weight: bold; text-align: right; color: #000; letter-spacing: 1px;"></span>
					</div>
					<div style="background: url('{{ MEDIA_URL }}img/progress-bar/progress.gif') no-repeat; height: 13px; width: 1px; display: block; float: right"></div>
				</td>
			</tr>
			<tr>
				<td>MP:</td>
				<td class="mp" value="{{ mp_atual }}" rel="{{ mp }}">
					<div style="background: url('{{ MEDIA_URL }}img/progress-bar/progress.gif') no-repeat; height: 13px; width: 1px; display: block; float: left"></div>
					<div style="background: url('{{ MEDIA_URL }}img/progress-bar/bg.gif'); height: 13px; width: 99.5%; display: block; float: left">
					<span class="mp-info" style="background: url('{{ MEDIA_URL }}img/progress-bar/on_blue.gif'); display: block; float: left; height: 11px; margin: 1px 0; font-size: 8px; font-family: Tahoma; line-height: 11px; font-weight: bold; text-align: right; color: #000; letter-spacing: 1px;"></span>
					</div>
	 				<div style="background: url('{{ MEDIA_URL }}img/progress-bar/progress.gif') no-repeat; height: 13px; width: 1px; display: block; float: right"></div>
				</td>
			</tr>
			<tr>
				<td>Nível:</td>
				<td>{{ nivel }}</td>
			</tr>
			<tr>
				<td>Ouro:</td>
				<td>{{ ouro }}</td>
			</tr>
			<tr>
				<td>Raça:</td>
				<td>{{ raca }}</td>
			</tr>
			<tr>
				<td>Classe:</td>
				<td>{{ classe }}</td>
			</tr>
		</table>
		<table width="100%">
			<tr class="title">
				<td colspan="2">Atributos</td>
			</tr>
			<tr>
				<td width="35%">Agilidade:</td>
				<td>{{ agilidade }}</td>
			</tr>
			<tr>
				<td>Constituição:</td>
				<td>{{ constituicao }}</td>
			</tr>
			<tr>
				<td>Força:</td>
				<td>{{ forca }}</td>
			</tr>
			<tr>
				<td>Inteligência:</td>
				<td>{{ inteligencia }}</td>
			</tr>
		</table>
	</div>
</fieldset>
<fieldset id="model-equipment">
	<div id="equipment">
		<p class="title">Equipamentos</p>
		<div id="model">
			<div id="header"></div>
			<div id="chest"></div>
			<div id="hand_l"></div>
			<div id="hand_r"></div>
			<div id="feet"></div>
		</div>
	</div>
	<div id="all">
		<p class="title">Equipamentos do Inventário</p>
		<ul id="sortable">
			{% for equipamento in equipamentos_arma %}
				<span id="ar{{ equipamento.id }}"><li class="{{ equipamento.tipo_equipamento }}"><img src="{{ MEDIA_URL }}{{ equipamento.img }}" /></li></span>
			{% endfor %}
			{% for equipamento in equipamentos_armadura %}
				<li class="{{ equipamento.tipo_equipamento }}"><img src="{{ MEDIA_URL }}{{ equipamento.img }}" /></li>
			{% endfor %}
		</ul>
	</div>
	<input type="hidden" value="0" id="validar" />
	<input type="hidden" value="0" id="hl" />
	<input type="hidden" value="0" id="hr" />
	<input type="hidden" value="0" id="hd" />
</fieldset>
{% endblock %}
